<template>
    <div class="movie-title-box">

       <div class="city-box">
         <span>上海</span>
         <i class="fa fa-caret-down"></i>
       </div>

       <div class="movie-nav">
         <!-- router-link 默认是a标签 -->
         <router-link to = '/movie/n.hot' active-class='active' >正在热映</router-link>
         <router-link to = '/movie/f.hot' active-class='active' >即将上映</router-link>
       </div>
       
       <div class="search">
         <i class="fa fa-search"></i>
       </div>
    </div>
</template>

<style lang="stylus" scoped>
 
  .movie-title-box
    height 3rem
    font--size .14rem
    color  #777
    background #ffffff
    border 0 0 1px 0, red
    display  flex
    align-items  center
    .city-box
            flex 70
            padding 1rem
    .city-box
             span 
                font-size 1.2rem
    .movie-nav
             flex 255     
             text-align center 
             height 3rem
             line-height 3rem 
             font-size 1.2rem  
             padding 0 .12rem
     .movie-nav
             a
              display inline-block
              margin 0 1rem    
              color #66
              font-weight  bold  
              &.active  
                   color  red 
                   border-bottom  2px solid  red    
                
    .search
          flex 50
          padding .15rem
          display flex
          justify-content center
          font-size 1.5rem
          color  red

</style>
// 注意激活的写法是要在a标签里